<template>
  <div>
    <!-- echart表格 -->
    <div :id="randomId" class="linecharts" :style="echartStyle"></div>
  </div>
</template>

<script>
	import echarts from 'echarts'
	import 'echarts/theme/shine.js';//图表主题
	// 引入 ECharts 主模块
////	var echarts = require('../../echarts/lib/echarts');
//	require("echarts/lib/chart/pie");
//	// 引入提示框和标题组件
//	require('echarts/lib/component/tooltip');
//	require('echarts/lib/component/title');
	
	export default {
		name:'mLinechart',
		props: {
			echartStyle: {  // 样式
				type: Object,
				default () {          
					return  {}        
				} 
			},
	    textlink: {
	      type: String,
	      required: false,
	      default: ''
	    },
	    xname: {
	      type: String,
	      required: false,
	      default: ''
	    },
	    yname: {
	      type: String,
	      required: false,
	      default: ''
	    },
	    bardata: Object
	  },
  data () {
    return {
    	randomId:'mychart'+ Date.now() + Math.random(),
      link: this.textlink,
      title: '',
      legend_data: [],
      axis_data: [],
      series_data: [],
      x_name: this.xname,
      y_name: this.yname
    }
  },
  watch: {
    bardata (val) {
      this.title = val.title
      this.legend_data = val.legend_data
      this.axis_data = val.Axis_data
      this.series_data = val.series
      this.drawBar()
    }
  },
  mounted () {
    this.drawBar('randomId')
  },
  methods: {
    drawBar (id) {
      let myCharts = echarts.init(document.getElementById(id),'shine')
      myCharts.setOption({
//      color: ['#83d0d5', '#f1cb48', '#188ae2', '#E8830B', '#7460ae', '#fc4b6c', '#31ce77', '#eae0bc', '#e732cb', '#9dce8a'],
        title: {
          text: this.title,
          left: '35',
          top: '20',
          link: this.link,
          textStyle: {
            color: '#B6B6B6'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '15%',
          bottom: '30%'
        },
        legend: {
          data: this.legend_data,
          left: 'center',
          bottom: '0',
          textStyle: {
            color: '#B6B6B6'
          }
        },
        xAxis: [
          {
            type: 'category',
            position: 'bottom',
            name: this.x_name,
            nameLocation: 'center',
            nameGap: '50',
            data: this.axis_data,
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#BFC2C8'
              },
              rotate: 30,
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#BFC2C8'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            left: '10',
            name: this.y_name,
            nameLocation: 'center',
            nameGap: '45',
            axisLine: {
              lineStyle: {
                color: '#BFC2C8'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#898D95'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#BFC2C8'
              },
              interval: 0,
//            formatter: function (value, index) {
//              if (value >= 1000 && value < 10000000) {
//                value = value / 1000 + 'K'
//              } else if (value >= 1000000 && value < 1000000000) {
//                value = value / 1000000 + 'M'
//              } else if (value >= 1000000000) {
//                value = value / 1000000000 + 'B'
//              }
//              return value
//            }
            }
          }
        ],
        series: this.series_data
      })
		}
    }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.linecharts{
    width: 100%;
}
</style>
